<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TreeComboBox in EditorPanel</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
 	<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>
	<script type="text/javascript" src="./Ext.ux.TreeCombo.js"></script>
    
	<script type="text/javascript">
	Ext.onReady(function(){
	
		Ext.ns('EX');




		// -----------EXAMPLE 1---------------
		// EditorGridPanel with two different TreeComboBoxes (without renderer)
		
		EX.Proxy1 = new Ext.data.HttpProxy({
			api: {
				read : 'AJAX_select.json.php',
				create : 'AJAX_insert.json.php',
				update: 'AJAX_update.json.php',
				destroy: 'AJAX_delete.json.php'
			}
		});
		
		EX.Store1 = new Ext.data.JsonStore({
			root: 'DS',
			proxy:EX.Proxy1,
			fields: ['ID','Val1','Val2','Val3'],
			totalProperty: 'total',
			sccessProperty: 'success',
			idProperty: 'ID',
			writer: new Ext.data.JsonWriter({
				proxy: Ext.Proxy1,	    
				encode: true,
				writeAllFields: false
			}),
			autoSave: true, autoLoad:true
		}); 

		
		EX.Grid1 = new Ext.grid.EditorGridPanel({
			region: 'center',
			renderTo: Ext.get('DIV1'),
			store: EX.Store1,
			columns: [
				{
					header: 'ID', 
					width: 40, 
					dataIndex: 'ID', 
					sortable: true
				},{
					header: 'Val1', 
					width: 100, 
					dataIndex: 'Val1', 
					sortable: true,
					editor:new Ext.form.TextField({
						maxLength:50
					})
				},{
					header: 'Val2 (multiple checked value)', 
					width: 266, 
					dataIndex: 'Val2', 
					sortable: true,
					editor: new Ext.ux.form.TreeCombo({
						width: 100,
						listWidth:220,
						lazyInit:false,
						loader: new Ext.tree.TreeLoader({
		                    preloadChildren: false,
							url:'tree.json',
							requestMethod:'GET'
		                }),
		                root: new Ext.tree.AsyncTreeNode({	})
					})
				},{
					header: 'Val3 (only single check value allow)', 
					width: 266, 
					dataIndex: 'Val3', 
					sortable: true,
					editor: new Ext.ux.form.TreeCombo({
						width: 100,
						listWidth:220,
						lazyInit:false,
						singleCheck:true,  // <<<<<<<--------
						loader: new Ext.tree.TreeLoader({
		                    preloadChildren: false,
							url:'tree.json',
							requestMethod:'GET'
		                }),
		                root: new Ext.tree.AsyncTreeNode({	})
					})
				}
				
			],
			sm: new Ext.grid.RowSelectionModel({}),
			bbar:[
				new Ext.Button({
					text:'refresh Store',
					handler: function() {
						EX.Store1.reload();
					}
				})
			],
			autoHeight:true,
			autoWidth:true
		});
	
	


		// -----------EXAMPLE 2---------------
		// EditorGridPanel with Renderer
		EX.Proxy2 = new Ext.data.HttpProxy({
			api: {
				read : 'AJAX_select.json.php',
				create : 'AJAX_insert.json.php',
				update: 'AJAX_update.json.php',
				destroy: 'AJAX_delete.json.php'
			}
		});
		
		EX.Store2 = new Ext.data.JsonStore({
			root: 'DS',
			proxy:EX.Proxy2,
			fields: ['ID','Val1','Val2','Val3'],
			totalProperty: 'total',
			sccessProperty: 'success',
			idProperty: 'ID',
			writer: new Ext.data.JsonWriter({
				proxy: Ext.Proxy2,	    
				encode: true,
				writeAllFields: false
			}),
			autoSave: true, autoLoad:true
		});
		
		EX.TC2=new Ext.ux.form.TreeCombo({
			width: 100,
			listWidth:220,
			lazyInit:false,
			loader: new Ext.tree.TreeLoader({
                preloadChildren: true,
				url:'tree.json',
				requestMethod:'GET'
            }),
            root: new Ext.tree.AsyncTreeNode({	})
		});
		 
		EX.Grid2 = new Ext.grid.EditorGridPanel({
			region: 'center',
			renderTo: Ext.get('DIV2'),
			store: EX.Store2,
			columns: [
				{
					header: 'ID', 
					width: 40, 
					dataIndex: 'ID', 
					sortable: true
				},{
					header: 'Value with renderer', 
					width: 266, 
					dataIndex: 'Val2', 
					sortable: true,
					editor: EX.TC2,
					renderer:EX.TC2.getRendererFunction
				}
				
			],
			sm: new Ext.grid.RowSelectionModel({}),
			bbar:[
				new Ext.Button({
					text:'refresh Store',
					handler: function() {
						EX.Store2.reload();
					}
				})
			],
			autoHeight:true,
			autoWidth:true,
			listeners: {
				afterrender: function(){
					new Ext.util.DelayedTask(function(){
						EX.Grid2.getStore().reload();
					}).delay(750);
				}
			}
		});
	
	
	
	
		// ---------EXAMPLE 3-------------------
		// TreeComboBox in Formpanel (with submitting node-id)
		
		EX.Form= new Ext.form.FormPanel({
			autoWidth:true,
			autoHeight: true,
			renderTo: Ext.get('DIV3'),
			items: [
				new Ext.form.TextField({
					fieldLabel:'TextField',
					allowBlank: true
				}),
				new Ext.ux.form.TreeCombo({
					id:'TreeComboForm',
					width: 300,
					listWidth:350,
					lazyInit:false,
					loader: new Ext.tree.TreeLoader({
						preloadChildren: false,
						url:'tree.json',
						requestMethod:'GET'
					}),
					root: new Ext.tree.AsyncTreeNode({	}),
					value:'E3_1'
				}),
				new Ext.form.Hidden({
					name:'TreeVal',
					id:'TreeVal',
					value:''
				})
			],
			bbar: [
				{
					text:'submit',
					handler: function() {
						Ext.getCmp('TreeVal').setValue(Ext.getCmp('TreeComboForm').getValue());
						EX.Form.getForm().submit({
							url: 'submit.php'
						});
					}
				}
			]
		});
		
	
	
	});
	</script>
	
</head>
<body style='margin:7mm'>
	<h1 style="font-size:25px">Example-Page for Ext.ux.TreeCombo</h1>
	<p>Note: Use <a href="http://getfirebug.com/" target="_blank">Firebug-Extension</a> to show transfered data's!</p>
		

	<h2 style="margin-top:1cm">ComboTree in GridEditorPanel</h2>
	<div id='DIV1' style='width:720px;'> </div>
	
	<h2 style="margin-top:1cm">ComboTree in GridEditorPanel with Renderer</h2>
	<div id='DIV2' style='width:720px;'> </div>

	<h2 style="margin-top:1cm">ComboTree in FormPanel</h2>
	<div id='DIV3' style='width:720px;'> </div>
</body>
</html>
